import ReactDOM from "react-dom";
import React from 'react';

import QueryBuilder from '../src/index';

import './query-builder.scss';

const fields = [
    { name: 'firstName', label: 'First Name' },
    { name: 'lastName', label: 'Last Name' },
    { name: 'age', label: 'Age' },
    { name: 'address', label: 'Address' },
    { name: 'phone', label: 'Phone' },
    { name: 'email', label: 'Email' },
    { name: 'twitter', label: 'Twitter' },
    { name: 'isDev', label: 'Is a Developer?' },
];

class RootView extends React.Component {
    constructor() {
        super();
        this.state = {
            query: {}
        };
    }

    render () {
        return (
            <div className="flex-box">
                <div className="scroll">
                    <QueryBuilder
                        fields={this.props.fields}
                        controlClassnames={{ fields: 'form-control' }}
                        onQueryChange={this.logQuery.bind(this)} />
                </div>
                <div className="shrink query-log scroll">
                    <h4>Query</h4>
                    <pre>{JSON.stringify(this.state.query, null, 2)}</pre>
                </div>
            </div>
        );
    }

    logQuery (query, queryString) {
        this.setState({ query, queryString });
    }

}

ReactDOM.render(<RootView fields={fields} />, document.querySelector('.container'));

